<template>
  <img :src="videoFrame" alt="Video Frame" />
</template>

<script>

export default {
  name: "VideoFrame",
  props:{
    showVideo:{//父组件传过来的状态
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      videoFrame: ''
    };
  },
  mounted() {
    this.fetchVideoFrame();
    setInterval(this.showVideoFrame, 100); // 每秒请求一次视频帧
  },
  methods: {
    showVideoFrame() {
      if (this.showVideo === true){
        this.fetchVideoFrame()
      }
    },
    fetchVideoFrame() {
      this.$axios.get('/api/video-stream', { responseType: 'arraybuffer' })
        .then(response => {
          const blob = new Blob([response.data], { type: 'image/jpeg' });
          this.videoFrame = URL.createObjectURL(blob);
        })
        .catch(error => {
          console.error('Error fetching video frame:', error);
        });
    },
    closeVideoFrame() {
      this.showVideo = false
    }
  }
}
</script>

<style scoped>
img {
  text-align: center;
  width: 100%;
  height: auto;
}
</style>
